<template>
  <el-scrollbar style="height: 100%" class="opration-container">
    <div class="opration">
      <div class="oprationLeft">
        <bs-add-button-icon @click.native="doAdd" v-has="'SCREEN_SCREEN_SAVE'"></bs-add-button-icon>
        <bs-delete-button-icon @click.native="doDelete" v-has="'SCREEN_SCREEN_DELETE'"></bs-delete-button-icon>
        <bs-edit-button-icon @click.native="doEdit" v-has="'SCREEN_SCREEN_UPDATE'"></bs-edit-button-icon>
        <!-- <bs-add-button-icon @click.native="doAdd"></bs-add-button-icon>
        <bs-delete-button-icon @click.native="doDelete"></bs-delete-button-icon>
        <bs-edit-button-icon @click.native="doEdit"></bs-edit-button-icon> -->
        <bs-refresh-button-icon @click.native="doRefresh"></bs-refresh-button-icon>
      </div>
      <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item>
            <el-select
              v-model="queryData.queryType"
              :placeholder="$t('全部选项')"
              clearable
              style="width: 100px"
              @clear="doClearQuery"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('请输入关键词搜索')"
              v-model="queryData.queryParam"
              clearable
              style="width: 160px"
            >
              <template slot="prepend"
                ><i class="iconfont icon-sousuo"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon @click.native="doList"></bs-search-button-icon>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import ScreenApi from '@/api/screen'

export default {
    name: 'DeviceLogCondition',
    data() {
        return {
            searchForm: {},
            showItem: '',
            searchItemData: [
                { name: '全部选项', value: 0 },
                { name: '屏幕名称', value: 1 },
                { name: '厂家信息', value: 4 }
            ]
        }
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    props: {
        queryData: {
            default: {}
        }
    },
    methods: {
      doRefresh() {
        this.doList()
        this.$message.success('刷新成功')
      },
      // 查询
      doList() {
          this.queryData.page = 1
          this.$eventBus.$emit('doList', this.queryData)
      },
      // 点击清除下拉选择条件
      doClearQuery() {
        // this.queryData.queryType = 0
        // this.queryData.queryParam = ''
        // this.doList()
        this.$set(this.queryData, 'queryType', 0)
        this.$set(this.queryData, 'queryParam', '')
      },
        // 添加
      doAdd() {
        this.$emit('add')
      },
      doEdit() {
        this.$emit('edit')
      },
      //删除
      async doDelete(row) {
        this.$emit('delete')
      }
    }
}
</script>
